<template>
    <div class="model">
      <div class="box">
        <img src="../../assets/duanwu/img/success.png" alt="" />
        <p>您的成绩为：{{ score }}分</p>
        <div class="detail">
          <div class="item">
            <span style="color: rgba(243, 48, 96, 1)">最佳成绩</span>
            <span style="color: #eeb569">{{ score }}分</span>
          </div>
          <div class="item">
            <span style="color: rgba(243, 48, 96, 1)">最佳排名</span>
            <span style="color: #eeb569">NO.1</span>
          </div>
        </div>
        <div class="btngroup">
          <div class="btn" @click="showRank">排行榜</div>
          <div class="btn" @click="end">再玩一次</div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        props:['score'],
        methods:{
            end(){
                this.$emit('rePlay')
            },
            showRank(){
              this.$emit('showRank',1)
            }
        }
    }
</script>

<style lang="less" scoped>
.model {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.7);
    .box {
      position: absolute;
      top: 45%;
      left: 50%;
      width: 70%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: .533rem;
      padding: 2.133rem .533rem 1.066rem;
      color: #666;
      text-align: center;
      img {
        width: 90%;
        position: absolute;
        top: -16%;
        left: 5%;
      }
      p {
        font-size: 1.066rem;
      }
      .detail {
        display: flex;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: .8rem 0;
        margin: 1.066rem 0;
        .item {
          display: flex;
          flex-direction: column;
          flex: 1;
          &:first-child {
            border-right: 1px solid #ccc;
          }
        }
      }
      .btngroup {
        font-size: .746rem;
        display: flex;
        justify-content: space-around;
        .btn {
          color: #fff;
          border-radius: 100px;
          padding: .266rem .533rem;
          background: linear-gradient(
            0deg,
            rgba(218, 160, 84, 1),
            rgba(248, 196, 128, 1)
          );
        }
      }
    }
  }
</style>